<template>
  <div class="content">
    <el-form
      ref="form"
      :model="form"
      label-width="90px"
    >
      <el-row>
        <el-col :span="18">
          <el-form-item label="操作时间段">
            <el-date-picker
              v-model="form.starttime"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
              style="width: 170px;"
            ></el-date-picker>~
            <el-date-picker
              v-model="form.endtime"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
              style="width: 170px;"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col
          :span="6"
          style="text-align: right;"
        >
          <el-button
            type="primary"
            style="width: 120px;"
            @click="query"
          >查询</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-row class="two_el_row">
      <el-col :span="18">
        <div style="width:100px;height:2px"></div>
      </el-col>
      <el-col :span="6">
        <div
          class="lowerBrick fr"
          @click="lowerBrick"
        >
          <img
            src="../../../assets/img/lowerBrick.png"
            alt
            style="margin-right:6px"
          >
          <span>下钻</span>
        </div>
      </el-col>
    </el-row>

    <div class="corporateRefund_box">
      <el-table
        :data="tableData"
        stripe
        style="width: 100%"
        border
      >
        <template v-for="item in tableColumn">
          <el-table-column
            :key="item.value"
            v-if="item.value!=='opt' && item.value!='usenum'"
            :prop="item.value"
            :label="item.label"
            align="center"
          ></el-table-column>
          <el-table-column
            :key="item.value"
            v-else-if="item.value=='usenum'"
            :label="item.label"
            min-width="90px"
            align="center"
          >
            <template slot-scope="scope">
              <span>{{scope.row.usenum}}</span>
            </template>
          </el-table-column>
          <!-- <el-table-column
            v-else
            :key="item.value"
            label="操作"
            align="center"
          >
            <template slot-scope="scope">
              <el-button
                @click="handleClick(scope.row)"
                type="text"
                size="small"
              >处理</el-button>
              <!-- <el-button
              v-else
              @click="handleClick(scope.row)"
              type="text"
              size="small"
            >详情</el-button> 
        </template>
        </el-table-column> -->
          <el-table-column
            :key="item.value"
            v-else-if="item.value=='opt'"
            label="操作"
            min-width="100px"
            align="center"
          >
            <template slot-scope="scope">
              <el-button
                @click="lookLog(scope.row)"
                type="text"
                size="small"
              >查看日志</el-button>
            </template>
          </el-table-column>
        </template>
      </el-table>
      <div
        class="pageBox"
        v-if="tableData.length>0"
      >
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="pageChange"
          :current-page="form.pagenum"
          :page-sizes="[10,20, 30, 50,100]"
          :page-size="form.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="form.total"
          background
        ></el-pagination>
      </div>

      <el-dialog
        :visible.sync="manageShow"
        width="700px"
        :close-on-click-modal="false"
        class="jhdialog"
      >
        <div class="comTitle clearfix">
          <div
            class="titleName fl"
            v-html="companyInfo.companyname"
          ></div>
          <div :class="{'fr':true,'status':true}">{{status}}</div>
        </div>
        <div style="padding:0 20px 20px;">
          <div class="title">退款信息</div>
          <ul class="info clearfix">
            <li>
              <div class="info-label">退款企业名称:</div>
              <div
                class="infoText"
                v-html="companyInfo.companyname"
              ></div>
            </li>
            <li>
              <div class="info-label">退款金额:</div>
              <div
                class="infoText red"
                v-html="`${companyInfo.refundnum}元`"
              ></div>
            </li>
            <li>
              <div class="info-label">退款账户名称:</div>
              <div
                class="infoText"
                v-html="companyInfo.restorenum"
              ></div>
            </li>
            <li>
              <div class="info-label">申请时间:</div>
              <div
                class="infoText"
                v-html="companyInfo.insertdate"
              ></div>
            </li>
            <li>
              <div class="info-label">退款银行账号:</div>
              <div
                class="infoText"
                v-html="companyInfo.usenum"
              ></div>
            </li>
            <li style="width: 100%">
              <div class="info-label">退款银行:</div>
              <div
                class="infoText"
                v-html="companyInfo.banktype"
              ></div>
            </li>
          </ul>
          <div class="border-dashed">
            <div class="title">退款处理结果</div>
            <div style="height:40px;display: flex;align-items: center;">
              <el-radio-group
                v-model="refundResult"
                style="padding:0 20px"
                @change="resultChange"
              >
                <el-radio label="1">成功</el-radio>
                <el-radio label="2">未成功</el-radio>
              </el-radio-group>
              <div v-show="refundResult==='2'">备注：
                <el-input
                  style="width:300px"
                  placeholder="请填写未通过原因"
                  v-model="failReason"
                ></el-input>
              </div>
            </div>
            <div
              slot="footer"
              class="dialog-footer"
            >
              <el-button @click="cancel">取 消</el-button>
              <el-button
                class="button"
                type="primary"
                @click="submit"
              >提 交</el-button>
            </div>
          </div>
        </div>
      </el-dialog>
    </div>
    <el-dialog
      :visible.sync="showLog"
      width="1024px"
      custom-class="showlog"
    >
      <showLog :reportid="reportId"></showLog>
    </el-dialog>
  </div>
</template>
<script>
import showLog from "../../backlog/showLog.vue";
export default {
  components: {
    showLog
  },
  data () {
    return {
      form: {
        starttime: "",
        endtime: "",
        type: '',
        pagesize: 10,
        pagenum: 1,
        total: 0,
        userid: this.$route.params.userid || JSON.parse(localStorage.getItem('userinfo')).userid,
      },
      tableData: [],
      tableColumn: [{ label: "企业名称", value: "companyname" },
      { label: "退款银行", value: "banktype" },
      { label: "退款银行账户", value: "usenum" },
      { label: "退款账户人", value: "restorenum" },
      { label: "退款金额(元)", value: "refundnum" },
      { label: "申请时间", value: "inserdate" },
      { label: "操作时间", value: "operationdate" },
      { label: "操作", value: "opt" }
        // { label: "审批人", value: "auditorname" },
        // { label: "审批时间", value: "auditdate" },
        // { label: "操作", value: "opt" }
      ],
      // Page: {
      //   total: 10,
      //   pageNum: 1,
      //   pageSize: 10
      // },
      manageShow: false,
      companyInfo: {},
      failReason: '',
      refundResult: "1", //退款结果
      status: "待处理",
      showLog: false,
      reportId: ""
    }
  },
  props: ['type'],
  mounted () {
    this.getList()
  },
  methods: {
    //查询
    query () {
      this.form.pagenum = 1;
      this.getList();
    },
    //下钻
    lowerBrick () {
      this.$router.push({
        name: 'lowerBrickList', //跳转的路径
        params: {
          type: this.type,
          userid: this.form.userid
        }
      })
    },
    handleSizeChange (val) {
      this.form.pagesize = val;
      this.form.pagenum = 1;
      this.getList()
    },
    getList (page) {
      this.form.type = this.type;
      // let params = {
      //   pagenum: "1",
      //   status: status,
      //   pagesize: this.Page.pageSize,
      // };
      if (this.form.starttime && this.form.endtime && Date.parse(this.form.starttime) > Date.parse(this.form.endtime)) {
        this.$message({
          message: "结束时间不能早于开始时间",
          type: "warning"
        });
        return;
      }
      this.$axios.post('/app/v1/platform/unusual/logList', this.form).then(resp => {
        if (resp.data.code == '1') {
          this.tableData = resp.data.data.list || [];
          this.form.total = Number(resp.data.data.totalnum);
          this.form.pagesize = Number(resp.data.data.pagesize);
          this.loading = false;

        }
      }).catch({})
      // this.$axios
      //   .post("/app/v1/platform/company/refundList", this.form)
      //   .then(res => {
      //     if (res.data.message === "success.") {
      //       let result = res.data.data;
      //       this.tableData = result.list;
      //       // this.pageSize = Number(result.pagesize ? result.pagesize : 10);
      //       // this.totalNum = Number(result.totalnum);
      //       // this.Page.total = Number(result.totalnum);
      //       // this.cpage = page ? Number(page) : 1;
      //     } else {
      //       this.$message({
      //         message: res.data.message,
      //         type: "error"
      //       });
      //     }
      //   }).catch({});
    },
    pageChange (p) {
      this.form.pagenum = p;
      let page = p.toString();
      this.getList(page);
    },
    handleClick (r) {
      this.companyInfo = r;
      this.manageShow = true;
      this.failReason = "";
    },

    resultChange (r) {
      if (r === "1") this.failReason = "";
    },
    cancel () {
      this.manageShow = false;
      this.failReason = "";
    },
    submit () {
      if (this.refundResult === "2" && !this.failReason.trim()) {
        this.$message({
          message: "请填写驳回原因!",
          type: "warning"
        });
        return;
      }
      if (this.refundResult === "1") {
        this.$confirm("是否处理该退款?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          let params = {
            refundid: this.companyInfo.refundid,
            status: this.refundResult,
            remark: this.failReason
          };
          this.$axios
            .post("/app/v1/platform/company/refundResult", params)
            .then(res => {
              if (res.data.message === "success.") {
                this.$message({
                  message: "操作成功!",
                  type: "success"
                });
                this.getList("1");
              } else {
                this.$message({
                  message: res.data.message,
                  type: "error"
                });
                this.getList("1");
              }
            });
          this.manageShow = false;
        });
      } else {
        this.$confirm("是否驳回该用户的退款申请?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          let params = {
            refundid: this.companyInfo.refundid,
            status: this.refundResult,
            remark: this.failReason
          };
          this.$axios
            .post("/app/v1/platform/company/refundResult", params)
            .then(res => {
              if (res.data.message === "success.") {
                this.$message({
                  message: "操作成功!",
                  type: "success"
                });
                this.getList("1");
              } else {
                this.$message({
                  message: res.data.message,
                  type: "error"
                });
                this.getList("1");
              }
            });
          this.manageShow = false;
        });
      }
    },

    lookLog (row) {
      this.reportId = row.reportid;
      this.showLog = true;
    },


  }

}
</script>
<style scoped>
.content {
  background: #fff;
  padding: 0 20px;
}
.el-row {
  padding-top: 20px;
}
.two_el_row {
  padding-top: 0px;
}
.lowerBrick {
  color: #0064e4;
  font-size: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 36px;
  border-radius: 18px;
  border: 1px solid #0064e4;
  padding: 0 26px;
  cursor: pointer;
  margin-bottom: 10px;
}

.corporateRefund_box {
  padding-bottom: 20px;
}
</style>


